<template>
  <view class="container">
    <!-- 按钮主体 -->
    <view 
      class="animated-btn"
      :class="{ 'btn-active': isAnimating }"
      @click="handleClick"
      @touchstart="startAnimation"
      @touchend="stopAnimation"
      @mouseover="hover = true"
      @mouseleave="hover = false"
    >
      <text class="btn-text">点击有惊喜</text>
      <!-- 波纹动画 -->
      <view v-if="showRipple" class="ripple-effect"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isAnimating = ref(false);
const showRipple = ref(false);
const hover = ref(false);

// 点击处理
const handleClick = () => {
  console.log('按钮被点击');
  // 实际业务逻辑...
};

// 触摸开始触发动画
const startAnimation = () => {
  isAnimating.value = true;
  showRipple.value = true;
};

// 触摸结束停止动画
const stopAnimation = () => {
  isAnimating.value = false;
  setTimeout(() => {
    showRipple.value = false;
  }, 300);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  padding: 100rpx;
}

.animated-btn {
  position: relative;
  padding: 20rpx 40rpx;
  background-color: #4CAF50;
  border-radius: 50rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
  overflow: hidden;

  // 悬浮效果
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.3);
  }

  // 点击动画
  &.btn-active {
    transform: scale(0.95);
    background-color: #45a049;
  }
}

.btn-text {
  color: white;
  font-size: 32rpx;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

// 波纹动画
.ripple-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  from {
    opacity: 1;
    width: 0;
    height: 0;
  }
  to {
    opacity: 0;
    width: 200rpx;
    height: 200rpx;
  }
}

// 兼容H5的hover状态
@media (hover: hover) {
  .animated-btn {
    transition: all 0.3s, transform 0.2s;
  }
}
</style>
